import axios from 'axios'
import React, { useState, useEffect } from 'react'
import { NavBar, Space, Toast, Tabs, Button } from 'antd-mobile'
import { SearchOutline, DeleteOutline } from 'antd-mobile-icons'
import { useNavigate, useSearchParams } from 'react-router-dom'
import { addTrack } from '../../store/modules/cart.jsx'
import { useSelector, useDispatch } from 'react-redux'
import '../../view/Pending/Pending.jsx'
axios.defaults.baseURL = 'http://127.0.0.1:3000'
import '../../static/Order/Order.css'
export default function Order() {
    const [list, setList] = useState([])
    const [cate, setCate] = useState([])
    const dispatch = useDispatch()
    const navigate = useNavigate()
    const [params] = useSearchParams()
    let title = params.get('title')
    let out_trade_no = params.get('out_trade_no')
    let trade_no = params.get('trade_no')
    //类别查询
    let c_id = ''
    const getList = async () => {
        await axios.get(`/OrderRouter/list?id=${c_id}&title=${title}`).then(res => {
            setList(res.data.list)
        })
    }
    const getCate = async () => {
        await axios.get('/OrderRouter/cate').then(res => {
            setCate(res.data.cate)
        })
    }
    const queryOrder = () => {
        axios.post('/OrderRouter/queryOrder', { out_trade_no: out_trade_no, trade_no: trade_no }).then(res => {
            console.log(res.data);
            if (res.data.code == '203') {
                dispatch(addTrack('1'))
            }
        })
    }
    useEffect(() => {
        getList()
        getCate()
        queryOrder()
    }, [])
    const handleChange = (e) => {
        c_id = e
        getList()
    }
    const right = (
        <div style={{ fontSize: 24 }}>
            <Space style={{ '--gap': '16px' }}>
                <SearchOutline onClick={() => navigate('/searchOrder')} />
                {/* <MoreOutline /> */}
            </Space>
        </div>
    )

    const back = () => {
        navigate(-1)
    }
    const handleNo = (id) => {
        console.log(id);

    }
    const handleAdd = () => {
        axios.post("/OrderRouter/add").then(res => {
            dispatch(addTrack('0'))
            getList()
        })
    }
    const handleDel = (id) => {
        axios.get(`/OrderRouter/OrderDel?id=${id}`).then(res => {
            if (res.data.code == '200') {
                getList()
            }
        })
    }
    return (
        <div className='order_box'>
            <button onClick={() => handleAdd()}>添加订单</button>
            <div>
                <NavBar right={right} onBack={back}>
                    标题
                </NavBar>
            </div>
            <div>
                <Tabs onChange={(e) => handleChange(e)}>
                    <Tabs.Tab title='全部' key=''>

                    </Tabs.Tab>
                    {
                        cate.map((item, index) => {
                            return (
                                <Tabs.Tab title={item.title} key={item._id}>

                                </Tabs.Tab>
                            )
                        })
                    }
                </Tabs>
            </div>
            <div className='order_orders'>
                {
                    list.map((item, index) => {
                        return (
                            <div className='order_boxs' key={item._id}>
                                <div className='order_title'>
                                    <div className='order_title_in'>
                                        <img src="/img/门票.png" alt="" width='30px' height='30px' />
                                        <span style={{ marginTop: '-0.5rem', fontSize: '2rem' }}><b>门票</b></span>
                                    </div>
                                    <div className='order_title_content'>
                                        <span style={{ color: 'blue', marginRight: '2rem', fontSize: '1.8rem' }}>{item.type.title} {item.type.title == '待评价' && < DeleteOutline onClick={() => handleDel(item._id)} />}  </span >
                                    </div>
                                </div>
                                <div className='order_price'>
                                    <div>
                                        <p style={{ fontWeight: '700', fontSize: '1.5rem' }}>{item.title}</p>
                                        <p style={{ fontSize: '1.4rem', marginTop: '0.5rem' }}>{item.time}有效·{item.num}份</p>
                                        <p style={{ fontSize: '1.4rem', marginTop: '0.5rem' }}>凭【电子凭证】取票使用</p>
                                    </div>
                                    <div>
                                        <span style={{ fontSize: "3rem", color: 'red', margin: '-3rem' }}>￥{item.price}</span>
                                    </div>
                                </div>
                                <div style={{ textAlign: 'right', margin: "3rem" }}>
                                    {
                                        item.type._id == '6721ef7c1febd0eb47f8bff9' && <Button style={{ width: '10rem' }} onClick={() => handleNo(item._id)}>取消</Button>
                                    }
                                    {
                                        item.type._id == '6721ef681febd0eb47f8bff7' && <Button style={{ width: '10rem' }}>退款</Button>
                                    }
                                    {
                                        item.type._id == '6721ef681febd0eb47f8bff7' && <Button color='primary' style={{ marginLeft: "2rem", width: '10rem' }} onClick={() => navigate(`/pending?id=${item._id}`)} >去支付</Button>
                                    }
                                    {
                                        item.type._id == '6721ef7c1febd0eb47f8bff9' && <Button color='primary' style={{ marginLeft: "2rem", width: '10rem' }} onClick={() => navigate(`/notused?id=${item._id}`)}  >去使用</Button>
                                    }
                                    {
                                        item.type._id == '6721ef891febd0eb47f8bffb' && <><Button style={{ width: '10rem' }}>去评价</Button> <Button >再次预定</Button>  </>
                                    }
                                </div>
                            </div>
                        )
                    })
                }
            </div>
        </div>
    )
}
